<script setup>
import { Picture } from '@element-plus/icons-vue'
const images = [
  { id: 1, title: '好久不见', url: '/placeholder.svg?height=300&width=300' },
  { id: 2, title: '0419随便画画2', url: '/placeholder.svg?height=300&width=300' },
  { id: 3, title: '0419随便画画3', url: '/placeholder.svg?height=300&width=300' },
  { id: 4, title: '0419随便画画4', url: '/placeholder.svg?height=300&width=300' },
  { id: 5, title: '0419随便画画5', url: '/placeholder.svg?height=300&width=300' },
  { id: 6, title: '0419随便画画6', url: '/placeholder.svg?height=300&width=300' },
  { id: 7, title: '0419随便画画7', url: '/placeholder.svg?height=300&width=300' },
  { id: 8, title: '0419随便画画8', url: '/placeholder.svg?height=300&width=300' },
  { id: 9, title: '0419随便画画9', url: '/placeholder.svg?height=300&width=300' },
  { id: 10, title: '0419随便画画10', url: '/placeholder.svg?height=300&width=300' },
  { id: 11, title: '0419随便画画11', url: '/placeholder.svg?height=300&width=300' },
  { id: 12, title: '0419随便画画12', url: '/placeholder.svg?height=300&width=300' },
  { id: 13, title: '0419随便画画13', url: '/placeholder.svg?height=300&width=300' },
  { id: 14, title: '0419随便画画14', url: '/placeholder.svg?height=300&width=300' },
  { id: 15, title: '0419随便画画15', url: '/placeholder.svg?height=300&width=300' },
  { id: 16, title: '0419随便画画16', url: '/placeholder.svg?height=300&width=300' },
  { id: 17, title: '0419随便画画17', url: '/placeholder.svg?height=300&width=300' },
  { id: 18, title: '0419随便画画18', url: '/placeholder.svg?height=300&width=300' },
  { id: 19, title: '0419随便画画19', url: '/placeholder.svg?height=300&width=300' },
  { id: 20, title: '0419随便画画20', url: '/placeholder.svg?height=300&width=300' },
  { id: 21, title: '0419随便画画21', url: '/placeholder.svg?height=300&width=300' },
  { id: 22, title: '0419随便画画22', url: '/placeholder.svg?height=300&width=300' },
  { id: 23, title: '0419随便画画23', url: '/placeholder.svg?height=300&width=300' },
  { id: 24, title: '0419随便画画24', url: '/placeholder.svg?height=300&width=300' },
  { id: 25, title: '0419随便画画25', url: '/placeholder.svg?height=300&width=300' }
];
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="head">
          <div class="card-header">
          图片管理
          </div> 
        <el-button type="primary" class="add-button" >+添加图片</el-button>
      </div>
    </template>
    <div class="article-management">
    <!-- 搜索 -->
      <div class="search" style="border-bottom: 1px solid #eee;">
        <el-input
          v-model="search"
          placeholder="搜索图片..."
          style="width: 50vh;"
          :prefix-icon="Search"
        />
      </div>
      <!-- 图片列表 -->
      <div class="image-list">
        <el-card
          v-for="image in images"
          :key="image.id"
          class="image-card"
          :body-style="{ padding: '0px' }"
          shadow="never"
        >
        <div class="card-content">
          <el-image
            :src="image.url"
            fit="cover"
            class="gallery-image"
            loading="lazy"
          >
            <template #placeholder>
              <div class="image-placeholder">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
          <div class="image-info">
            <span class="image-title">{{ image.title }}</span>
          </div>
        </div>
        </el-card>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination background 
        :page-sizes="[24, 48]"
        layout="prev,pager,next,sizes"
        :total="total" 
        :page-size="pageSize" 
        :current-page="pageNum" 
        
        />
      </div>

    </div>
  </el-card>
</template>



<style scoped>
.page-container {
  min-height: 86.5vh;
  box-sizing: border-box;
  margin: 10px;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header {
  font-size: 25px;
}

.article-management {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;

  .image-card {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background-color: #a1a1a1;
    border: none;

    &:hover {
      transform: translateY(-5px);
    }

    .card-content {
      height: 100%;
      display: flex;
      flex-direction: column;

      .gallery-image {
        flex: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;

        .image-placeholder {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background-color: #3c3c3c;
          color: #666;
          font-size: 24px;
        }
      }

      .image-info {
        padding: 8px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
}

.image-card {
  height: 100%;
}

.card-content {
  display: flex;
  flex-direction: column;
}

.gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.image-info {
  padding: 8px;
}

.image-title {
  font-size: 14px;
  color: #333;
}

.pagination {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>

<style>
:deep(.el-card__body) {
  height: auto;
  padding: 0;
}
</style>

